/*  定义全局 CSS 主题变量  */

/*  web开发中顶层变量名是 :root，小程序使用 page  */
page {
  /*  主题颜色  */
  --color-primary: #1976d2; /*  主要颜色  */
  --color-accent: #0d9488; /*  次要颜色  */
  /*--color-accent: #087f5b; !*  次要颜色  *!*/
  --td-brand-color: var(--color-primary);

  /*  文本颜色  */
  --color-text: #27272a; /*  默认文本颜色  */
  --color-text-second: #71717a; /*  次要文本颜色  */
  --color-text-third: #a1a1aa; /*  第三文本颜色  */
  --color-text-dark: #fff; /*  深色文本颜色  */
  --color-text-link: var(--color-primary); /*  链接文本颜色  */
  /*--color-text-link: #0052d9; !*  链接文本颜色  *!*/

  /*  边框颜色  */
  --color-border: #e7e7e7;
  --color-border-light: #f0f0f0;

  /*  背景颜色  */
  --color-bg-body: #f5f5f5; /*  默认背景颜色  */
  --color-bg-panel: #fff; /*  面板背景颜色  */

  /*  阴影  */
  --shadow-1: 0 0 8rpx rgba(0, 0, 0, 0.1);
  --shadow-2: 0 4rpx 24rpx rgba(0, 0, 0, 0.2);

  /*  字体大小  */
  --font-size-small: 24rpx; /*  小号字体  */
  --font-size-normal: 28rpx; /*  正常字体  */
  --font-size-large: 32rpx; /*  大号字体  */
  --font-size-title: 36rpx; /*  标题字体  */
  --font-size-huge: 40rpx; /*  超大号字体  */
}

.text-blue {
  color: var(--color-primary);
}

.text-green {
  color: var(--color-accent);
}

.text-orange {
  color: #f59e0b;
}
